<!DOCTYPE html>
<html>

<head>
	<link rel="stylesheet" href="css-icon.css">
	<style>
		body {
			margin: 0;
			box-sizing: border-box;
			background-repeat: repeat;
			/* background-image: url(./grid_10px.svg); */
		}

		body::after {
			position: fixed;
			top: 0;
			left: 0;
			content: '';
			width: 100%;
			height: 100%;
			background-image: linear-gradient(0deg,
					black 0px,
					black 1px,
					transparent 1px,
					transparent 100px),
				linear-gradient(90deg,
					black 0px,
					black 1px,
					transparent 1px,
					transparent 100px);
			background-size: 60px 60px;
			opacity: 0.1;
			z-index: -1;
			pointer-events: none;
		}

		body * {
			box-sizing: inherit;
		}

		.ul {
			display: flex;
			flex-wrap: wrap;
			list-style: none;
			margin: 0;
			padding: 0;
		}

		.ul li {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 60px;
			height: 60px;
			vertical-align: middle;
			/* border: 1px solid #ddd; */
			/* margin-right: 10px; */
			/* margin-bottom: 10px; */
		}
	</style>
</head>
<!-- https://www.zhangxinxu.com/sp/icon/css.php -->
<!-- https://cssicon.space/#/ -->

<body>
	<ul class="ul">
		<li>
			<i class="ci ci-search"></i>
		</li>
		<li>
			<i class="ci ci-search-magnify"></i>
		</li>
		<li>
			<i class="ci ci-search-minify"></i>
		</li>
		<li>
			<i class="ci ci-close"></i>
		</li>
		<li>
			<i class="ci ci-menu"></i>
		</li>
		<li>
			<i class="ci ci-arrow-left"></i>
		</li>
		<li>
			<i class="ci ci-arrow-right"></i>
		</li>
		<li>
			<i class="ci ci-arrow-up"></i>
		</li>
		<li>
			<i class="ci ci-arrow-down"></i>
		</li>
		<li>
			<i class="ci ci-plus"></i>
		</li>
		<li>
			<i class="ci ci-minus"></i>
		</li>
		<li>
			<i class="ci ci-correct"></i>
		</li>
		<li>
			<i class="ci ci-remove"></i>
		</li>
		<li>
			<i class="ci ci-microphone"></i>
		</li>
		<li>
			<i class="ci ci-location"></i>
		</li>
		<li>
			<i class="ci ci-message"></i>
		</li>
		<li>
			<i class="ci ci-stop"></i>
		</li>
		<li>
			<i class="ci ci-clock"></i>
		</li>
		<li>
			<i class="ci ci-user"></i>
		</li>
		<li>
			<i class="ci ci-bell"></i>
		</li>
		<li>
			<i class="ci ci-heart"></i>
		</li>
		<li>
			<i class="ci ci-print"></i>
		</li>
		<li>
			<i class="ci ci-edit"></i>
		</li>
		<li>
			<i class="ci ci-link"></i>
		</li>
		<li>
			<i class="ci ci-map"></i>
		</li>
		<li>
			<i class="ci ci-email"></i>
		</li>
		<li>
			<i class="ci ci-bookmark"></i>
		</li>
		<li>
			<i class="ci ci-camera"></i>
		</li>
		<li>
			<i class="ci ci-fullscreen"></i>
		</li>
		<li>
			<i class="ci ci-card"></i>
		</li>
		<li>
			<i class="ci ci-lock"></i>
		</li>
		<li>
			<i class="ci ci-unlock"></i>
		</li>
		<li>
			<i class="ci ci-code"></i>
		</li>
		<li>
			<i class="ci ci-flag"></i>
		</li>
		<li>
			<i class="ci ci-tag"></i>
		</li>
		<li>
			<i class="ci ci-signal"></i>
		</li>
		<li>
			<i class="ci ci-export"></i>
		</li>
		<li>
			<i class="ci ci-upload"></i>
		</li>
		<li>
			<i class="ci ci-download"></i>
		</li>
		<li>
			<i class="ci ci-shutdown"></i>
		</li>
		<li>
			<i class="ci ci-paperclip"></i>
		</li>
		<li>
			<i class="ci ci-relay"></i>
		</li>
		<li>
			<i class="ci ci-key"></i>
		</li>
		<li>
			<i class="ci ci-refresh"></i>
		</li>
		<li>
			<i class="ci ci-pilcrow"></i>
		</li>
	</ul>

</body>

</html>